<template>
  <div v-loading.fullscreen.lock="pageLoading">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">利润表</span>
        </el-col>
      </div>
      <el-form :model="criteriaForm" ref="basisForm" size="mini" label-width="65px">
        <el-row :gutter="24">
          <!--查询条件-->
          <el-col :span="8">
            <el-form-item label="入库日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="rangeInStockTime"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="rangeInStockTime1"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="结算日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="rangeCostDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="创建日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="rangeCreateTime"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="客户">
                <el-select v-model="criteriaForm.customerId" filterable :filter-method="remoteCustomer" placeholder="请选择客户" :style="{width: '100%'}">
                  <el-option v-for="item in customerMap" :key="item.id" :label="item.text" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属人">
                <el-select v-model="criteriaForm.settleManId" filterable clearable placeholder="请选择所属人" :style="{width: '100%'}">
                  <el-option v-for="(item, value) in userMap" :key="value" :label="item" :value="value"/></el-select>
              </el-form-item>
              <el-form-item label="所属部门">
                <el-select v-model="criteriaForm.belongDepartIds" placeholder="请选择所属部门" multiple filterable :style="{width: '100%'}">
                  <el-option v-for="(item, value) in belongGroupMap" :key="value" :label="item" :value="parseInt(value)"/>
                </el-select>
                <div v-if="hasSelect == 1">
                  <el-tag type="info" size="mini" v-for="(item,value) in selectMap" :key="value" :label="item" style="margin-right:10px" @click="selectDepart(value)">{{item}}</el-tag>
                </div>
              </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运单号" prop="waybillNoText">
              <el-input v-model="criteriaForm.waybillNoText" type="textarea" placeholder="请输入运单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="M单号" prop="masterNumberText">
              <el-input v-model="criteriaForm.masterNumberText" type="textarea" placeholder="请输入M单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;margin-bottom: 30px">
          <el-col :span="4" style="margin-left: 10px;">
            <el-button size="mini" type="primary" @click="doExportAmoebaProfit">导出利润表</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import {ajax, searchCustomerLimit} from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";

  export default {
    components: {},
    props: [],
    data() {
      return {
        pageLoading: false,
        criteriaForm: {
          startInStockTime: "",
          endInStockTime: "",
          startCreateTime: "",
          endCreateTime: "",
          startCostDate: "",
          endCostDate: "",
          customerId: "",
          settleManId: "",
          waybillNoText: "",
          masterNumberText: "",
          belongDepartIds: []
        },
        rangeInStockTime: null,
        rangeInStockTime1: null,
        rangeCostDate: null,
        rangeCreateTime: null,
        customerMap: {},
        userMap: [],
        belongGroupMap: [],
        userDepartSelectMap: {},
        selectMap: { '0': '销售部', '1': '全选', '-1': '全不选'},
        hasSelect: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
      this.initAmoebaProfit();
    },
    methods: {
      selectDepart(op){
        const departIds = this.userDepartSelectMap[op];
        console.log(departIds);
        this.criteriaForm.belongDepartIds = departIds;
      },
      initAmoebaProfit() {
        ajax("exportAmoebaProfit", {})
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              //this.customerIdOptions = res.data.customerIdOptions;
              this.userMap = res.data.userMap;
              this.belongGroupMap = res.data.belongGroupMap;
              this.hasSelect = res.data.hasSelect;
              this.userDepartSelectMap = res.data.userDepartSelectMap;
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      async remoteCustomer(query) {
        if (query !== '') {
          this.customerMap = await searchCustomerLimit(query);
        } else {
          this.customerMap = {};
        }
      },
      doExportAmoebaProfit() {
        if(this.rangeInStockTime){
          this.criteriaForm.startInStockTime = this.rangeInStockTime[0];
          this.criteriaForm.endInStockTime = this.rangeInStockTime[1];
        }
        if(this.rangeInStockTime1){
          this.criteriaForm.startInStockTime = this.rangeInStockTime1[0];
          this.criteriaForm.endInStockTime = this.rangeInStockTime1[1];
        }
        if(this.rangeCostDate){
          this.criteriaForm.startCostDate = this.rangeCostDate[0];
          this.criteriaForm.endCostDate = this.rangeCostDate[1];
        }
        if(this.rangeCreateTime){
          this.criteriaForm.startCreateTime = this.rangeCreateTime[0];
          this.criteriaForm.endCreateTime = this.rangeCreateTime[1];
        }
        console.log(this.criteriaForm);
        this.pageLoading = true;
        let attrs = {};
        attrs["headers"] = {
          "YG-UNIQUE-KEY": "do_export_amoeba_profit" + new Date().getTime()
        };
        ajax("doExportAmoebaProfit", this.criteriaForm,attrs)
          .then(res => {
            console.log(res);
            if (res.path) {
              var fileName = res.path;
              if (fileName) {
                window.open(constant.FILE_SERVER + fileName);
              } else {
                //qiao.bs.alert("导出失败");
                this.$message.error(res.errorMesage);
              }
              this.pageLoading = false;
            } else {
              //this.$message.error("没有数据");
              this.$message.error(res.errorMesage);
              this.pageLoading = false;
            }
          })
          .catch(error => {
            console.log(error);
            this.pageLoading = false;
          });
      }
    }
  };
</script>
<style></style>
